import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProFormText,
} from '@ant-design/pro-components';
import {message, Tabs} from 'antd';
import {registerUserUsingPOST} from "@/services/lapi-backend/userAdmin";
import {history} from "umi";


export default () => {


  const registerUser = (u: API.UserAddRequest) => {
    registerUserUsingPOST(u, {}).then(r => {
      if (r.code == 0) {
        message.success("注册成功")
        history.push("/user/login")
      } else {
        message.error(r.message)
      }
    })
  }
  return (
    <div
      style={{
        backgroundColor: 'white',
        height: 'calc(100vh - 48px)',
        margin: -24,
      }}
    >
      <LoginFormPage
        submitter={{searchConfig: {submitText: "注册"}}}
        onFinish={async (a) => {
          const u: API.UserAddRequest = {account: a.account, password: a.password, checkPassword: a.checkPassword}
          registerUser(u);
        }}
        backgroundImageUrl="https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png"
        logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
        title="LAPI"
        subTitle="免费的API提供平台"
        actions={
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              flexDirection: 'column',
            }}
          >
          </div>
        }
      >
        <Tabs
          centered
          items={[{
            key: 'register',
            label: `账号注册`,
          }]}
        >
        </Tabs>
        <>
          <ProFormText
            name="account"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined className={'prefixIcon'}/>,
            }}
            placeholder={'账号'}
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={'prefixIcon'}/>,
            }}
            placeholder={'密码'}
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          /> <ProFormText.Password
          name="checkPassword"
          fieldProps={{
            size: 'large',
            prefix: <LockOutlined className={'prefixIcon'}/>,
          }}
          placeholder={'二次确认密码'}
          rules={[
            {
              required: true,
              message: '请输入密码！',
            },
          ]}
        />
        </>
      </LoginFormPage>
    </div>
  );
};
